<template>
    <div id='forget-view'>
            <!-- 主要这个页面  以后可以在这个页面改 -->
            <div class='router-inner login-view'>

            <!-- wrapper begin -->
            <div class="wrapper">

                <header class="header">
                    <h1 class="header__title">重置密码</h1>
                    <!-- <h5 class="header__company">杭州联合银行</h5> -->
                </header>
                <div class="main">
                    <div class="login-form">
                        <ul class="login-form__input">
                            <li class='change-number' @click='resetButton()' ref='changemy'>更改号码</li>
                            <li class="login-form__item">
                                <i class='iconfont icon-user'></i>
                                <input class='iconfig' ref='kai' v-model='username' type="text" placeholder="请输入邮箱号" :disabled='resetJudge' @blur='phoneSubmit()'>
                            </li>  
                            <li class='new-change'></li>
                            <li class="login-form__item">
                                <i class='iconfont icon-password'></i>
                                <input  v-model='yanzhengma' type="text" placeholder="请输入邮箱收到的验证码" @blur='yanzhengSubmit()'>
                            </li> 
                             <li class='shou' id='mgf' @click='successFul()'>  
                                 获取验证码
                             </li>   
                             <li class='new-one'></li>
                             <li class="login-form__item">
                                <i class='iconfont icon-password'></i>
                                <input  v-model='yanzhengma1' type="password" placeholder="请输入邮箱的登录密码" @blur='passwordOne()' >
                             </li> 
                             <li class='new-two'></li>
                             <li class="login-form__item">
                                <i class='iconfont icon-password'></i>
                                <input  v-model='yanzhengma2' type="password" placeholder="请输入邮箱的新密码" @blur='resetSubmit()'>
                             </li>  
                             <li class='new-three'></li>  
                               <!-- <button @click='resetButton()'>dd</button>                        -->
                        </ul>
                        <div class="login-form__button" @click='changeUserPwd()'>
                            <button-loading> 重置密码 </button-loading>
                        </div>
                        <div  class='colorBlue' @click='goLast()'>
                           返回上一步
                        </div>
                    </div>
                </div>
            </div>
            <!-- wrapper end -->
            <footer-bar class='login-footer'></footer-bar>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import { getOS } from '../utils/utils'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import checkBoxGroup from '../components/CheckBoxGroup.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import  {mapGetters, mapActions}  from 'vuex'
    import {addLenderValidation, resetAccountPasswordValidation, operatorEditValidation} from '../validation/validation'
    import {allApi} from '../api/api'
    import moment from 'moment'
    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            checkBoxGroup,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker,
            // AreaSelect
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setMsgTipStyle',
                'setSessionId',
                'localInfo'
            ]),
            goLast(){
                // console.log(111222333)
                this.$router.go(-1)
            },
            resetButton(){
                // console.log(this.$refs.changemy)
                // this.$refs.changemy.style.backgroundColor='#e4393c';
                this.$refs.changemy.disabled=true
                // if(this.$refs.changemy.getAttribute('class')){
                //     alert(111)
                // }else{
                //     alert(222)
                // }
                this.resetJudge=false
               
            },
                // yanzhengma
            testYan(){
                 var d = new Date();
                d.setSeconds(d.getSeconds() + 59);
                var m = d.getMonth() + 1;
                var time = d.getFullYear() + '-' + m + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                var id = "#mgf";
                // console.log($(id))
                // console.log($(id).attr("disabled",true));  
                var end_time = new Date(Date.parse(time.replace(/-/g, "/"))).getTime(),
          //月份是实际月份-1
                    sys_second = (end_time - new Date().getTime()) / 1000;
                var timer = setInterval(function() {
                        if (sys_second > 1) {
                            sys_second -= 1;
                            var day = Math.floor((sys_second / 3600) / 24);
                            var hour = Math.floor((sys_second / 3600) % 24);
                            var minute = Math.floor((sys_second / 60) % 60);
                            var second = Math.floor(sys_second % 60);
                            var time_text = '';
                            if (day > 0) {
                                time_text += day + '天';
                            }
                            if (hour > 0) {
                                if (hour < 10) {
                                    hour = '0' + hour;
                                }
                                time_text += hour + '小时';
                            }
                            if (minute > 0) {
                                if (minute < 10) {
                                    minute = '0' + minute;
                                }
                                time_text += minute + '分';
                            }
                            if (second > 0) {
                                if (second < 10) {
                                    second = '0' + second;
                                }
                                time_text += second + '秒';
                            }
                            $(id).text(time_text);
                            // if($("#mgf").html()==""){
                            //     console.log("222")
                            // }

                        } else {
                            // console.log($(this))
                            clearInterval(timer);
                            // $(this).attr("disabled", false);  
                            
                            $(id).html('获取验证码');
                            $(id).css("color", "2962ff");
                        }
                    },
                    1000);
            },
            successFul(){
                // $(this).attr("disabled", false);  
                // console.log($(this))
                this.testYan();
                this.sendEmail();
               
            },phoneSubmit(){
                // console.log(222)
                    let reg = /^([a-zA-Z0-9_-])+([.][a-zA-Z0-9_-]+)?@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ; //验证规则
                    let testmoni=document.querySelector('.new-change')
                // let phoneNum = '15507621999';
                // console.log(reg.test(phoneNum))
                    if(this.username&&this.username!=''){
                        if(reg.test(this.username)){
                            testmoni.innerHTML=''
                        }else{
                            testmoni.innerHTML='请输入正确的邮箱号码'                 
                        }
                    }else{
                            // console.log(testmoni)
                            testmoni.innerHTML='邮箱号不能为空'
                    }
            },yanzhengSubmit(){
                // console.log(111)
                let testmoni=document.querySelector('.new-one')
                // console.log(testmoni)
                if(this.yanzhengma&&this.yanzhengma!=''){
                      testmoni.innerHTML=''
                    }else{
                            // console.log(testmoni)
                            testmoni.innerHTML='验证码不能为空'
                    }
            },passwordOne(){
                // console.log(2)
                let testmoni=document.querySelector('.new-two')
                // console.log(testmoni)
                if(this.yanzhengma1&&this.yanzhengma1!=''){
                    //   testmoni.innerHTML=''
                    if(this.yanzhengma1.length<6){
                        // console.log("密码必须大于6位，请重新输入！");
                        // return;
                        testmoni.innerHTML='密码必须大于6位，请重新输入！'
                    }else{
                        testmoni.innerHTML=''
                    }
                        // console.log(1212121)
                 }else{
                    //  console.log("密码");
                    testmoni.innerHTML='密码不能为空'
                 }

            },resetSubmit(){
                // if(this.yanzhengma2.length<6){
                //     alert("密码必须大于6位，请重新输入！");
                // }
                // if(!(this.yanzhengma1==this.yanzhengma2 && this.yanzhengma2!='')){
                //     alert("两次输入的密码不一致，请重新输入！");
                //     // return;
                // }
                let testmoni=document.querySelector('.new-three')
                  if(this.yanzhengma2&&this.yanzhengma2!=''){
                   if(!(this.yanzhengma1==this.yanzhengma2 && this.yanzhengma2!='')){
                        testmoni.innerHTML='两次输入的密码不一致，请重新输入！'
                    }else{
                        testmoni.innerHTML=''
                    }
                      }else{
                    testmoni.innerHTML='密码不能为空'
                 }

            },
            // 验证码
            sendEmail(){
                let params = {
                   account:this.username
                }
                allApi.sendEmail(params)
                .then(result => {
                    console.log(result)    
                    this.setMsgTip({
                        text: '十分钟内收到验证码',
                        type: 'success'
                        }) 
                })
                .catch(error => {
                    console.error(error)
                })
            },
            // 重置密码
            changeUserPwd(){
                let params = {
                   account:this.username,
                   verificationCode:this.yanzhengma,
                   newPwd:this.yanzhengma1,
                   rePwd:this.yanzhengma2
                }
                allApi.changeUserPwd(params)
                .then(result => {
                    console.log(result)   
                    this.setMsgTip({
                        text: '重置密码成功',
                        type: 'success'
                        }) 
                })
                .catch(error => {
                    console.error(error)
                })
            },
          
        },
        data() {
            return {
               username:this.$route.params.id,
               resetJudge:true,
               yanzhengma:'',
               yanzhengma1:'',
               yanzhengma2:'',              
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                'localInfo',
            ])
        },
        created(){

        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #forget-view{
         background-size: cover;
        color:#fff;
        // &:before{
        //     content:'';
        //     position: absolute;
        //     width: 100%;
        //     height:100%;
        //     top:0;
        //     left:0;
        //     background:url('../images/headbg_grey.jpg') no-repeat center center;
        //     background-size: cover;
        //     z-index:-2;
        // }
        // &:after{
        //     content:'';
        //     position: absolute;
        //     width: 100%;
        //     height:100%;
        //     top:0;
        //     left:0;
        //     background-color:rgba(#000,0.6);
        //     background-size: cover;
        //     z-index:-1;
        // }
        .wrapper{
            width: 100%;
            height:100%;
            padding-bottom:10px;
            box-sizing:border-box;
        }
        .header{
            padding-top:139px;
            text-align:center;
        }
        .header__title{
            @extend %weight-light;
            font-size: 26px;
        }
        .header__company{
            @extend %weight-light;
            font-size: 14px;
            color:$dark;
            padding-top:10px;
        }
        .main{
            padding-top:67px;
        }
        .login-form{
            width: 260px;
            margin:0 auto;
        }
        .login-form__input{
            width: 100%;
            overflow:hidden;
            .iconfont{
                font-size:17px;
                color:$defaultColor;
                padding:0 12px;
            }
            input{
                flex:1;
                padding:16px 16px 16px 0;
                font-size: 15px;
            }
        }
        .login-form__item{
            display:flex;
            align-items:center;
            background-color: #FFF;
            margin-bottom:10px;
        }
        .login-form__button{
            .button{
                // padding: 13px 20px;
                font-size: 15px;
            }
        }
        .login-footer{
            position: absolute;
            bottom:10px;
        }
        .colorBlue{
            color:lightblue;
            cursor: pointer;
            text-align: center;
            margin: 20px 0;
        }
        li.change-number {
            width: 60px;
            position: absolute;
            top: 19px;
            left: 273px;
            cursor: pointer;
        }
         li.change-number:hover {
            width: 60px;
            position: absolute;
            top: 19px;
            left: 273px;
            cursor: pointer;
            color:#FF6E40;
        }
        .login-form{
            position: relative;
        }
        li.shou {
            width: 83px;
            height: 38px;
            background: grey;
            position: absolute;
            top: 65px;
            right: -98px;
            cursor: pointer;
            text-align: center;
            line-height: 38px;
        }
        // .changeTwo{
        //     width: 60px;
        //     position: absolute;
        //     top: 19px;
        //     left: 273px;
        //     cursor: pointer;
        //     color: red;
        // }
        .inputmy{
            border: 1px solid red;
        }
        .new-change{
            color:#FF6E40;
        }
        .new-one{
            color:#FF6E40;
        }
        .new-two{
            color:#FF6E40;
        }
        .new-three{
            color:#FF6E40;
        }
    }
</style>
